<template>
  <a-card :bordered="false" class="card-area">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="12">
            <a-form-item label="学号">
              <a-input v-model="queryParam.xh"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="学年">
              <a-select v-model="queryParam.xn" disabled>
                <a-select-option v-for="i in TYPE0125" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="学期">
              <a-select v-model="queryParam.xq" disabled >
                <a-select-option v-for="i in TYPE0072" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="操作">
              <a-button type="primary" @click="search">查询</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-form :form="form">
      <a-row :gutter="48" class="info">
        <a-col :md="8" style="text-align: center">
          <img :src="info.zpdz ? `${IMG_URL}${info.zpdz}` : require('@/assets/avator.jpg')" width="200px" alt="">
        </a-col>
        <a-col  :md="8">
          <div style="padding: 10px 0">学号：{{info.xh}}</div>
          <div style="padding: 10px 0">院系：{{info.xjxx && info.xjxx.ssyxmc}}</div>
          <div style="padding: 10px 0">性别：{{info.xbmc}}</div>
          <div style="padding: 10px 0">导师姓名：{{info.xjxx && info.xjxx.dsxm}}</div>
          <div style="padding: 10px 0">培养方向：{{info.xjxx && info.xjxx.pyfsmc}}</div>
          <div style="padding: 10px 0">学年：{{ systemInfo && systemInfo.schoolYear }}</div>
          <!-- <a-form-item
            label="延迟类型"
            :labelCol="{span: 8,offset: 0}"
            :wrapperCol="{span: 16}"
          >
            <a-input  v-decorator="['sfqj']"></a-input>
          </a-form-item> -->
        </a-col>
        <a-col  :md="8">
          <div style="padding: 10px 0">姓名：{{info.xm}}</div>
          <div style="padding: 10px 0">专业：{{info.xjxx && info.xjxx.sszymc}}</div>
          <div style="padding: 10px 0">年级：{{info.xjxx && info.xjxx.sznj}}</div>
          <div style="padding: 10px 0">身份证：{{info.zjhm}}</div>
          <div style="padding: 10px 0">学生类别：{{ info.xjxx && info.xjxx.xslbmc}}</div>
          <div style="padding: 10px 0">学期：{{ info.xq }}</div>
        </a-col>
      </a-row>
      <a-row :gutter="48">
        <a-col  :md="18">
          <a-form-item label="报到备注" style="text-align:left;" :labelCol="{span: 2,offset: 0}" :wrapperCol="{span: 22}">
            <a-input type="textarea" v-decorator="[
                'note'
              ]" :autosize="{ minRows: 2, maxRows: 10 }"/>
          </a-form-item>
          </a-col>
      </a-row>
      <a-row style="text-align: center">
        <a-button :disabled="info.xjxx && info.xjxx.xjztm !== '32'" type="primary" @click="checkIn">学生报到</a-button>
        <a-button :disabled="info.xjxx && info.xjxx.xjztm !== '33'" type="primary" @click="backCheckIn">报到退回</a-button>
      </a-row>
    </a-form>
  </a-card>
</template>

<script>
// import moment from 'moment'
import { mapState } from 'vuex'

const selectArr = ['TYPE0125', 'TYPE0072']
export default {
  name: 'TableList',
  data () {
    return {
      // 高级搜索 展开/关闭
      advanced: true,
      // 查询参数
      queryParam: {
        sfqj: 1
      },
      info: {
        xjxx:{}
      },
      postParams: {},
      optionAlertShow: true, // 是否显示alert，已选中
      visible: false,
      confirmLoading: false,
      editId: null,
      selectMenu: {
        yx: [], // 院系
        zy: [] // 所属专业
      },
      IMG_URL: process.env.IMG_URL
    }
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0125: state => state.app['TYPE0125'], // 学期
      TYPE0072: state => state.app['TYPE0072'] // 学年
    })
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  async created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0125')
    await this.$store.dispatch('app/setDictionary', 'TYPE0072')
    this.$store.dispatch('app/sysInfo').then(res => {
      this.$set(this.queryParam, 'xn', this.systemInfo.schoolYear)
      this.$set(this.queryParam, 'xq', this.systemInfo.currentSemester)
      this.info.xq = this.TYPE0072.find(s => {
        return s.code === this.systemInfo.currentSemester
      }).name
    })
    this.form.setFieldsValue({sfqj: 1})
  },
  methods: {
    search () {
      this.$api.student.stuInfo(this.queryParam.xh).then(res => {
        this.info = {
          xq: this.info.xq,
          ...res.data
        }
      })
    },
    checkIn () {
      if (!this.info.xh) {
        return this.$message.warning('请先选择需要报到的学生')
      }
      const form = this.form
      let fieldValues = null
      form.validateFields((err, values) => {
        if (err) {
          return
        }
        fieldValues = values
      });
      if(!fieldValues){
        return;
      }
      this.$confirm({
        title: '提示',
        content: `确定对学生：${this.info.xm}进行报到吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk:() => {
            this.$api.student.registerCheckOne(Object.assign(this.queryParam, fieldValues)).then(res => {
              form.resetFields()
              this.set = false
              this.$message.success('操作成功')
          })
        },
        onCancel:() => {},
      })
    },
    backCheckIn (){
      if (!this.info.xh) {
        return this.$message.warning('请先选择需要退回报到的学生')
      }
      const form = this.form
      let fieldValues = null
      form.validateFields((err, values) => {
        if (err) {
          return
        }
        fieldValues = values
      });
      if(!fieldValues){
        return;
      }
      this.$confirm({
        title: '提示',
        content: `确定对学生：${this.info.xm}进行退回报到吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk:() => {
            this.$api.student.registerCheckBack(Object.assign(this.queryParam, fieldValues)).then(res => {
              this.$message.success('操作成功')
              form.resetFields()
            })
        },
        onCancel:() => {},
      })
    }
  }
}
</script>
